<template lang="pug">
div
  obj-single-select(
    :options="result",
    key="sub_product_id",
    label="display_name",
    :update="update",
    type="selected",
    :loading="loading",
    :local-search="false",
    :search-change="search",
    :searchable="true",
    :custom-label="customLabel",
    placeholder="搜索产品",
  )
</template>

<script>
import { searchProduct } from '../../vuex/action'
import ObjSingleSelect from '../select/objSingle'

export default {
  name: 'productSearch',
  components: {
    ObjSingleSelect
  },
  vuex: {
    getters: {
      result: ({ product }) => product.result,
    },
    actions: {
      searchProduct,
    }
  },
  props: ['orderItem'],
  data () {
    return {
      loading: false,
    }
  },
  methods: {
    search (q) {
      catchError(async () => {
        this.loading = true
        await this.searchProduct({q})
        this.loading = false
      })
    },
    update({sub_product_id, price: sub_product_price, display_name}) {
      this.orderItem = {
        sub_product_id,
        display_name,
        sub_product_price: Number(sub_product_price),
        lens_id: null,
        lens_name: null,
        lens_price: null,
      }
    },
    customLabel ({display_name, status}) {
      return `${display_name} (${this.helper.subProductStatus(status)})`
    },
  },
  created () {
  },
  computed: {
  },
  watch: {
  }
}
</script>

<style lang="sass" scoped>
</style>
